<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="气血津液检查表"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <view class="scroll">
      <view class="tooltip" v-if="tooltip">{{ tooltip }}</view>
      <view class="block" v-for="(item, index) in tableData" :key="index">
        <view class="title">{{ item.title }}</view>
        <view class="checkbox">
          <u-checkbox
            @change="checkboxChange(index, idx)"
            v-model="child.checked"
            v-for="(child, idx) in item.list"
            :key="idx"
            :name="child.label"
            class="check"
            >{{ child.label }}</u-checkbox
          >
        </view>
      </view>
      <view class="btns">
        <button class="submit" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { updateUser, getUser } from "../../api/system/api";
export default {
  onLoad(option) {
    const { redirect } = option;
    if (redirect) this.redirect = redirect;
  },
  data() {
    return {
      tableData: [
        {
          title: "气虚",
          list: [
            "容易疲劳",
            "容易感冒",
            "手脚冰冷",
            "饭后立即犯困",
            "容易浮肿",
            "容易气喘",
            "容易胃胀",
          ],
        },
        {
          title: "气滞",
          list: [
            "容易焦躁愤怒",
            "容易感觉有压力",
            "头痛、肩颈酸痛",
            "胃胀、腹胀，经常暖气、胀气",
            "总感觉有什么堵在喉咙里",
            "反复腹泻或便秘",
            "浑身胀痛",
          ],
        },
        {
          title: "血虚",
          list: [
            "心悸",
            "健忘",
            "睡眠浅、多梦",
            "头晕、猛然站起会眩晕",
            "手脚发麻、抽筋",
            "脸色苍白、没有光泽",
            "眼睛发粘、视力模糊",
          ],
        },
        {
          title: "血瘀",
          list: [
            "色斑、雀斑、黑眼圈严重",
            "肤色暗沉",
            "脚背上血管明显鼓起",
            "经常同一个地方疼痛",
            "身上经常出现淤青，且难以消退，容易出血",
            "皮肤容易干燥",
            "经常头痛、肩颈酸痛、痛经等",
          ],
        },
        {
          title: "阴虚",
          list: [
            "身体发热、上火",
            "干咳",
            "皮肤、眼睛干燥",
            "口渴、想喝凉饮",
            "经常盗汗、难以入眠",
            "大便呈颗粒状、干燥，不易排出",
            "尿量少",
          ],
        },
        {
          title: "水滞",
          list: [
            "容易浮肿",
            "身体发沉、倦怠无力",
            "不容易口渴",
            "容易排软便或腹泻",
            "经常感觉头晕、恶心",
            "容易患过敏性鼻炎、哮喘、荨麻疹",
            "容易反胃",
          ],
        },
      ],
      userInfo: {},
      tooltip: "",
    };
  },
  onLoad(option) {
    this.userInfo = JSON.parse(option.userInfo);
    console.log(this.userInfo)
    getUser({
      id: this.userInfo.id
    }).then(res => {
      console.log(res)
      if (res.code === 200 && res.data.data.length) {
        this.userInfo = res.data.data[0]
        this.handleCheckbox()
      }
    })
  },
  methods: {
    checkboxChange(idx1, idx2) {
      console.log(idx1, idx2)
      this.tableData[idx1].list[idx2].checked = !this.tableData[idx1].list[idx2].checked
      this.$nextTick(() => {
        this.tableData = [...this.tableData]
      })
      console.log(this.tableData[idx1].list[idx2].checked)
    },
    handleCheckbox() {
      if (!this.userInfo.blood) {
        this.userInfo.blood = []
      } else {
        this.createTooltip()
      }
      this.tableData.forEach((v, i) => {
        v.list.forEach((v2, i2) => {
          if (this.userInfo.blood.includes(v2)) {
            this.tableData[i].list[i2] = {
              label: v2,
              checked: true
            }
          } else {
             this.tableData[i].list[i2] = {
              label: v2,
              checked: false
            }
          }
        })
      })
      console.log(this.tableData)
    },
    submit() {
      console.log(this.tableData)
      let blood = []
      let list = []
      for (let item of this.tableData) {
        list = list.concat(item.list)
        for (let l of item.list) {
          if (l.checked) {
            blood.push({
              type: item.title,
              label: l.label
            })
          }
        }
      }
      console.log(blood)
      updateUser(this.userInfo.id, {
        blood: JSON.stringify(blood)
      }).then(res => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '提交成功',
            type: 'success',
          })
          this.userInfo.blood = JSON.stringify(blood)
          this.createTooltip()
        }
      })
    },
    createTooltip() {
      if (this.userInfo.blood) {
        let blood = JSON.parse(this.userInfo.blood)
        let types = blood.map(v => v.type)
        types = Array.from(new Set(types))
        this.tooltip = `您是${types.join(',')}体质。请在食谱栏目中查看对应食谱~`
      } else {
        this.tooltip = ''
      }
    }
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;

  .scroll {
    height: 90vh;
    overflow: hidden;
    overflow-y: scroll;

    .block {
      display: flex;
      margin-bottom: 20rpx;

      .title {
        width: 20%;
        text-align: center;
      }
      .checkbox {
        width: 80%;
        .check {
          height: 40rpx;
        }
      }
    }
  }
}
.tooltip {
  text-align: center;
  padding: 20rpx;
  text-align: center;
  color: red;
}
.btns {
  padding: 30rpx;

  .submit {
    margin: 60rpx 30rpx 0;
    border: none;
    width: calc(100% - 60rpx);
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #e58b8a;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
